<template>
	<div class="mess">
		<input type="text" placeholder="搜索"/>
		<p ref="mess"><span class="iconfont icon-xiaoxi1"></span>点击开启消息通知，不再错过重要信息<span class="iconfont icon-cuo" @click="fun()"></span></p>
		<ul v-for="(v,i) in arr" :key="i">
			<li>
				<img :src="v.img" />
				<span>{{v.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				arr:[
					{
						"img":"img/message1.png",
						"title":"通讯录"
					},
					{
						"img":"img/message2.png",
						"title":"收件箱"
					},
					{
						"img":"img/message3.png",
						"title":"回复我的"
					},
					{
						"img":"img/message4.png",
						"title":"验证消息"
					}
				]
			}
		},
		methods:{
			fun(){
				// console.log(this.$refs.mess)
				this.$refs.mess.remove()
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.mess{
		padding-top: 0.56rem;
		input{
			width: 90%;
			height: 0.31rem;
			background-color: #f5f6f8;
			border-radius: 0.25rem;
			margin-left: 0.16rem;
			border:0px;
			margin-top: 0.1rem;
			
		}
		input::-webkit-input-placeholder {
			text-align: center;
			font-size: 0.15rem;
			color: #c6c8c7;
		}
		p{
			font-size: 0.15rem;
			color:#606060;
			margin-top: 0.2rem;
			.icon-xiaoxi1{
				margin-left: 0.18rem;
				margin-right: 0.12rem;
				color: #0097ff;
			}
			.icon-cuo{
				font-size: 0.19rem;
				margin-left: 0.35rem;
			}
		}
		ul{
			padding: 0 0.16rem;
		}
		li{
			margin-top: 0.23rem;
			img{
				width: 0.42rem;
			}
			span{
				font-size: 0.16rem;
				margin-left: 0.13rem;
			}
		}
	}
	
</style>
